<template>
  <div class="GuideDialog-box">
    <div class="GuideDialog-mask"></div>
    <div class="GuideDialog-container">
      <div class="GuideDialog-content">
        <img
          src="https://front-prod-static.lycheer.net/lecture2/static/img/引导浮窗.png"
          alt="好用的功能都在这里"
        />
      </div>
      <div class="GuideDialog-arrow">
        <div class="GuideDialog-arrow-clickArea">
          <img
            src="https://front-prod-static.lycheer.net/lecture2/static/img/气泡和箭头.png"
            alt="气泡和箭头"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
defineOptions({ 
    name:'guide-dialog'
})
</script>
<style>
.GuideDialog-box {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 300;
  top: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.GuideDialog-mask {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #000000;

  position: absolute;
  z-index: 300;
  top: 0;
  left: 0;
}

.GuideDialog-container {
  position: relative;
  z-index: 301;
  bottom: 60px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.GuideDialog-content {
  width: 82.67%;
  height: 24.44%;
}

.GuideDialog-content img {
  width: 100%;
  height: 100%;
}

.GuideDialog-arrow {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.GuideDialog-arrow-clickArea {
  height: 144px;
  padding: 10px 15px 15px 0;
}

.GuideDialog-arrow img {
  width: 103px;
  height: 119px;
}

.guide_snapshot_content {
  position: relative;
  z-index: 301;
  bottom: 40px;
  right: 36px;
  border-radius: 8px;
  background-color: #ff5a31;
  color: #fff;
}
.guide_snapshot_content_wrap {
  display: flex;
}
.guide_snapshot_content_left {
  display: flex;
  flex-direction: column;
  padding: 10px 82px 10px 20px;
  font-size: 20px;
  font-weight: 700;
}
@-webkit-keyframes GuideSnapshotAni {
  0% {
    top: 10px;
  }
  30% {
    top: 25px;
  }
  100% {
    top: 10px;
  }
}
@keyframes GuideSnapshotAni {
  0% {
    top: 10px;
  }
  30% {
    top: 25px;
  }
  100% {
    top: 10px;
  }
}
.guide_snapshot_content_wrap img {
  width: 60px;
  position: absolute;
  top: 10px;
  right: 12px;
  -webkit-animation: GuideSnapshotAni 0.7s ease-in infinite;
  animation: GuideSnapshotAni 0.7s ease-in infinite;
}
</style>

// WEBPACK FOOTER // //
./src/components/float-window/GuideDialog/GuideDialog.css
<!-- https://m.lizhiweike.com/indexpage 
https://m.lizhiweike.com/lecture2/4986124?continueFlag=8d2036f9c12de2d1c1a8f1ff1507ef4d
-->


calc(34px / 2)